import { PictureOutlined } from '@ant-design/icons'
import 'braft-editor/dist/index.css'
import React from 'react'
import BraftEditor from 'braft-editor'
import { ContentUtils } from 'braft-utils'
import { Upload } from 'antd'

const BraftEditorComponent = () => {


  const controls = ['bold', 'italic', 'underline', 'text-color', 'separator', 'link', 'separator']
  const extendControls = [
    {
      key: 'antd-uploader',
      type: 'component',
      component: (
        <Upload
          accept="image/*"
          showUploadList={false}

        >
          {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
          <button type="button" className="control-item button upload-button" data-title="插入图片">
            <PictureOutlined type="picture" theme="filled" />
          </button>
        </Upload>
      )
    }
  ]

  return (
    <div>
      <div className="editor-wrapper">
        <BraftEditor
          controls={controls}
          extendControls={extendControls}
        />
      </div>
    </div>
  )

}

export default BraftEditorComponent